﻿.file-viewer .icon-view{
overflow:hidden;
margin-top:27px;
}
.file-viewer .icon-view .icon .wapper{
width:5em;
height:5em;
}
.file-viewer .icon-view .icon img {
max-height: 5em;
max-width:5em;
}
.file-viewer .icon-view .icon {
float: left;
margin: 1em;
height: 7em;
width: 5em;
border-bottom: 1px solid transparent;
cursor: pointer;
}
.file-viewer .icon-view .icon:hover {
border-bottom: 1px solid #D86;
}
.file-viewer .icon-view > .container{
padding:10px;
position:relative;
top:0;
-webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease;
-o-transition: opacity 0.3s ease,-o-transform 0.3s ease;
-moz-transition: opacity 0.3s ease,-moz-transform 0.3s ease;
}
.file-viewer .icon-view > .container.destory{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
opacity:0.5;
}
.file-viewer .icon-view > .container.show{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
opacity:0.5;
}
.file-viewer .icon-view .icon .name {
height: 1.2em;
overflow: hidden;
font-size: 16px;
margin: auto;
text-overflow:ellipsis;
width: 5em;
white-space: nowrap;
}
.file-viewer .file-info  {
padding: 10px;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease;
width: 180px;
position: relative;
left: 100%;
border-left: 1px solid #1CF;
}
.file-viewer .file-info.have-info{
left:0;
}
.file-viewer .file-info >  .name-wapper h3,
.file-viewer .file-info >  .size-wapper h3,
.file-viewer .file-info >  .permission-wapper h3,
.file-viewer .file-info >  .type-wapper h3
{
font-weight: normal;
color: #111;
text-align: left;
}
.file-viewer .file-info  .name-wapper{
overflow:hidden;
}
.file-viewer .file-info  .img-wapper img{
max-width: 200px;
max-height: 170px;
cursor:pointer;
}
.file-viewer .file-info  .img-wapper{
margin-left:-10px;
}
.file-viewer .file-info  .name,
.file-viewer .file-info  .size,
.file-viewer .file-info  .permission,
.file-viewer .file-info  .type{
font-size: 0.8em;
}
.file-viewer .navigation {
background: rgba(250, 250, 250, 0.7);
position: fixed;
border-bottom: 1px solid #1CF;
top: 0;
width: 100%;
z-index: 1;
}

.file-viewer .navigation>.container {
overflow: auto;
}
.file-viewer .navigation-cell {
float: left;
display: block;
margin-left: 10px;
cursor: pointer;
border: none;
font-size: 15px;
font-weight: bold;
background: transparent;
padding: 0;
}
.file-viewer .navigation-cell.highlight{
color:#aaa;
border-bottom:3px solid #d86;
}
.file-viewer .navigation-cell:hover {
-webkit-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
background: #1CF;
}
.file-viewer .drive-list {
overflow: auto;
clear:left;
padding: 0;
margin: 0;
height:0;
-webkit-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
transition: height 0.5s ease;
}
.file-viewer .navigation:hover .drive-list{
height:20px;
margin: 0 0 10px 0;
padding: 0;
}
.file-viewer .drive-list p{
padding: 0;
margin: 0;
margin-left: 10px;
}

.file-viewer .spliter.h {
float: right;
border-bottom: 4px solid #D86;
width: 100%;
text-align: right;
font-size: 30px;
color: #666;
}
.file-viewer .file-info  .img-wapper img.zoom {
position: absolute;
left: 200px;
max-width: 754px;
max-height: 754px;
top: 0px;
border:3px solid #1CF;
}
